import {useEffect } from "react";
import * as echarts from "echarts";
import { Idownloads } from "@/types/type";
import { useTranslation } from "react-i18next";

interface ChartsProps {
  reactDown: Idownloads;
  vueDown: Idownloads;
  angularDown: Idownloads;
}

//渲染图表
const MyChart: React.FC<ChartsProps> = (props: ChartsProps) => {
  const { t } = useTranslation();
  const { reactDown, vueDown, angularDown } = props;
  useEffect(() => {
    type EChartsOption = echarts.EChartsOption;
    var chartDom = document.getElementById("main-charts")!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption = {
      title: {
        text: t("chart.title"),
      },
      tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(0, 0, 0, 0.8)",
        axisPointer: {
          type: "none",
        },
        textStyle: {
          color: "#fff",
        },
      },
      legend: {
        icon: "circle",
        data: ["React", "Vue", "Angular"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      toolbox: {
        show: true,
        feature: {
          saveAsImage: {
            title: t("chart.tip"),
          },
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        splitLine: {
          show: true,
        },
        axisLabel: {
          interval: 115,
        },

        data: reactDown.downloads.map((item) => item.day),
      },
      yAxis: {
        type: "value",
        min: 0,
        max: 7000000,
        interval: 1000000,
      },
      series: [
        {
          name: "React",
          color: "#FF851B",
          type: "line",
          stack: "Total",
          smooth: true,
          showSymbol: false, 
          symbol: "emptyCircle",
          data: reactDown.downloads.map((item) => item.downloads),
        },
        {
          name: "Vue",
          color: "#2ECC40",
          type: "line",
          stack: "Total",
          smooth: true,
          showSymbol: false, 
          symbol: "emptyCircle",
          data: vueDown.downloads.map((item) => item.downloads),
        },
        {
          name: "Angular",
          color: "#0074D9",
          type: "line",
          stack: "Total",
          smooth: true,
          showSymbol: false, 
          symbol: "circle",
          data: angularDown.downloads.map((item) => item.downloads),
        },
      ],
    };

    myChart.setOption(option);

    return () => {
      myChart.dispose();
    };
  }, [props.reactDown, props.vueDown, props.angularDown,t]);

  return <div id={"main-charts"} style={{ width: "100%", height: "400px" }}></div>;
};

export default MyChart;
